import { ReactElement } from 'react';
import { CloseOutline } from 'antd-mobile-icons';
import './index.less';
type Iprops = {
  readonly: boolean | undefined;
  showValue: string[];
  remove: Function;
  showFiled: any;
  fieldId: string;
  recentValue:any;
};
function Tag(props: Iprops): ReactElement {
  let { readonly, showValue, remove, showFiled, fieldId ,recentValue} = props;
  return (
    <div className="EformTags-list">
      {showValue.map((item: any, index: number) => {

        return (
          <div className="tag-item" key={index}>
            <span className={`${readonly ? 'disable' : ''}`}>
              {(typeof item[showFiled] == 'object'
                ? item[showFiled]?.label
                : item[showFiled] ?? item['text']) || '\u00a0'}
            </span>
            {readonly ? (
              ''
            ) : (
              <div style={{ display: 'flex' }}>
                <CloseOutline
                  fontSize={12}
                  className="tag-item-icons"
                  onClick={(e) => {
                    remove(e, item, fieldId,showValue,recentValue);
                  }}
                />
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}
export default Tag;
